<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>神经网络训练</title>
    <script src="./echarts.js"></script>
    <script src="./qwebchannel.js"></script>
    <script language="JavaScript">
        var middle=null;
        var plotData = null;
        var plotDataFields = [];
        var xAxis=[];
        document.addEventListener("DOMContentLoaded", function () {
            //log(567);
            new QWebChannel(qt.webChannelTransport, function (channel) {
                middle = channel.objects.middle;
                middle.textChanged.connect(function (text) {
                    //log(text);
                    var data = JSON.parse(text);
                    if (plotData == null) {
                        plotData={};
                        for (let key in data) {
                            plotDataFields.push(key);
                        }
                        for (let i=1;i<plotDataFields.length;i++){
                            let key=plotDataFields[i];
                            plotData[key] = [data[key]];
                        }
                    } else {
                        xAxis.push(data[plotDataFields[0]]);
                        for (let i=1;i<plotDataFields.length;i++){
                            let key=plotDataFields[i];
                            plotData[key].push(data[key]);
                        }
                    }
                    updateChart();
                });
            });
        });
        window.onload = function () {
            var timeoutId = window.setTimeout(function () { resize(); }, 500);
        }
    </script>
    <style>
    </style>
</head>
<body>
    <div id="log"></div>
    <div id="main"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        function updateChart() {
            var option = {
                tooltip: {},
                grid:{
                    x:60,
                    y:70,
                    x2:50,
                    y2:60,
                    borderWidth:10
                },
                legend: {
                    type: 'scroll',
                    right:40,
                    data: plotDataFields,
                    textStyle: {
                        fontSize: 18
                    }
                },
                xAxis: {
                    data: xAxis,
                    axisLabel: {
                        show: true,
                        rotate:40,
                        textStyle: {
                            fontSize : 14
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize : 14
                        }
                    }
                },
                series: []
            };
            for (let key in plotData) {
                option.series.push({
                    name: key,
                    type: 'line',
                    data: plotData[key],
                });
            }
            myChart.setOption(option);
        }
        function resize() {
            var main = document.getElementById('main');
            main.style.width = (window.innerWidth - 20) + "px";
            main.style.height = (window.innerHeight - 20) + "px";
            myChart.resize();
        }
        function resizeLater(milliseconds) {
            setTimeout(function(){
                resize();
            },milliseconds);
        }
        function reset(){
            plotData = null;
            plotDataFields = [];
            xAxis=[];
        }
        function log(s){
            document.getElementById('log').innerText=s;
        }
    </script>
</body>

</html>